<script setup lang="ts">
import { ref } from 'vue'

const loginType = ref<'wechat' | 'account'>('account')

const icons = {
  account: `<svg xmlns='http://www.w3.org/2000/svg' class='w-5 h-5 inline-block mr-1' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.121 17.804A9 9 0 1112 21a9 9 0 01-6.879-3.196z' /><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z' /></svg>`,
  wechat: `<svg xmlns='http://www.w3.org/2000/svg' class='w-5 h-5 inline-block mr-1' fill='none' viewBox='0 0 24 24' stroke='currentColor'><circle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2' fill='#7bb32e'/><rect x='7' y='7' width='10' height='10' rx='2' fill='white'/><rect x='10' y='10' width='4' height='4' rx='1' fill='#7bb32e'/></svg>`
}
</script>

<template>
  <div class="relative min-h-screen w-full flex">
    <!-- 背景图 -->
    <div class="absolute inset-0 z-0">
      <img src="https://cdn.pixabay.com/photo/2022/11/15/10/44/ai-7593581_1280.jpg" alt="bg" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-black/40"></div>
    </div>
    <!-- 渐变背景+AI主题SVG装饰 -->
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-blue-900 via-indigo-800 to-gray-900">
      <svg class="absolute right-0 bottom-0 w-1/2 h-1/2 opacity-30" viewBox="0 0 200 200" fill="none">
        <circle cx="100" cy="100" r="80" fill="#38bdf8" fill-opacity="0.3"/>
        <rect x="60" y="60" width="80" height="80" rx="20" fill="#818cf8" fill-opacity="0.2"/>
        <text x="100" y="120" text-anchor="middle" fill="#fff" font-size="32" font-weight="bold" opacity="0.2">AI</text>
      </svg>
    </div>
    <!-- 左上角logo -->
    <div class="absolute left-8 top-8 z-10">
      <span class="text-2xl font-bold text-white tracking-widest select-none">anbernic</span>
    </div>
    <!-- 登录区域 -->
    <div class="ml-auto z-10 flex flex-col justify-center items-center w-full max-w-xl min-h-screen pr-12 md:pr-24 lg:pr-32">
      <div class="bg-white/90 dark:bg-gray-900/90 rounded-2xl shadow-2xl p-10 md:p-14 w-full min-h-[420px] md:min-h-[520px] flex flex-col justify-center relative overflow-visible">
        <!-- 右上角角标切换 -->
        <div class="absolute right-0 top-0 z-20 w-20 h-20 overflow-hidden rounded-tr-2xl">
          <button
            v-if="loginType === 'account'"
            @click="loginType = 'wechat'"
            class="group w-full h-full focus:outline-none"
            aria-label="切换到微信扫码登录"
          >
            <div class="absolute right-0 top-0 w-20 h-20 bg-blue-500 transition hover:bg-blue-600" style="clip-path: polygon(100% 0, 0 0, 100% 100%);">
              <!-- 二维码图标 -->
              <svg class="absolute right-3 top-3 w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <rect x="3" y="3" width="5" height="5" rx="1" stroke="currentColor"/>
                <rect x="16" y="3" width="5" height="5" rx="1" stroke="currentColor"/>
                <rect x="3" y="16" width="5" height="5" rx="1" stroke="currentColor"/>
                <path d="M12 12h1v1h-1zM15 15h2v2h-2zM19 19h1v1h-1z" stroke="currentColor"/>
              </svg>
            </div>
          </button>
          <button
            v-else
            @click="loginType = 'account'"
            class="group w-full h-full focus:outline-none"
            aria-label="切换到账号密码登录"
          >
            <div class="absolute right-0 top-0 w-20 h-20 bg-blue-500 transition hover:bg-blue-600" style="clip-path: polygon(100% 0, 0 0, 100% 100%);">
              <!-- 电脑图标 -->
              <svg class="absolute right-3 top-3 w-8 h-8 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <rect x="3" y="4" width="18" height="12" rx="2" stroke="currentColor" fill="none"/>
                <path d="M8 20h8M12 16v4" stroke="currentColor"/>
              </svg>
            </div>
          </button>
        </div>
        <div class="flex flex-col items-center justify-center h-full pt-10">
          <h2 class="text-2xl font-bold mb-8 text-gray-900 dark:text-gray-100 tracking-wide">AI 智能后台</h2>
          <div v-if="loginType === 'account'" class="w-full">
            <!-- 账号密码登录表单占位 -->
            <form class="flex flex-col gap-4">
              <input type="text" placeholder="用户名" class="input input-bordered w-full" />
              <input type="password" placeholder="密码" class="input input-bordered w-full" />
              <button type="submit" class="btn btn-primary w-full">登录</button>
            </form>
          </div>
          <div v-else class="w-full flex flex-col items-center">
            <!-- 微信扫码登录占位 -->
            <div class="w-32 h-32 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-2xl">二维码</div>
            <p class="mt-4 text-gray-500 text-sm">请使用微信扫码登录</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.input {
  @apply px-3 py-2 border rounded outline-none focus:ring-2 focus:ring-blue-400 transition;
}
.input-bordered {
  @apply border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100;
}
.btn {
  @apply px-4 py-2 rounded font-medium transition;
}
.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}
</style> 